<script setup>
import { onMounted, ref } from "vue";
import { useUseStore } from "@/stores/user";
import TopButton from "@/components/Pengyq/TopButton.vue";
import { getItemIdByUserIdAPI } from "@/server/api/userInfo";
import { enableRateAPI } from "@/server/api/shopCommodity";

import {
  selectAllAddressAPI,
  insectBuyerDataAPI,
  updateBuyerDataByIdAPI,
  selectAllBrandListAPI,
  topCateListAPI,
  secondCateListAPI,
  setSkulist,
} from "@/server/api/BuyerData";

import {
  itemDetailImagsUp,
  itemImagsListUp,
  issueItemCommodity,
} from "@/server/api/ItemCommodity";
import router from "@/router";
import { ToastFun } from "@/hook/toast";
//获取汇率
import { selectAllTradinRate } from "@/server/api/userInfo";
import { countryList } from "@/data/countryList";
import { useI18n } from "vue-i18n";


const { t } = useI18n();
const useStore = useUseStore(); //导入itemID

const commoditySpecList = ref([])

const dto = ref({
  commodityId: null, //商品id
  commodityName: "草莓", //商品名
  freeShippingNum: 1, //免费起送
  priceOrder: 0, //排序
  start: null, // 页数
  size: null, //每页数
  countryCode: ["Accessories & Supplies" ], //国家
  degreeLoss: null, //磨损
  acceptAddressList: ["广东省"],   //支持发货的地区集合
  categoryId: 84, //分类id
  originAddress: "番禺", //地址
  originPhone: "13512344567", //手机
  originName: "jj", //姓名
  detailImages: [
    "b5e18b357cb"
  ],//详情图片
  imageList: [
    "b5e18b357cb"
  ], //图片轮播图集合
  shopId: "c57a119e39b", //网店id
  inventory: 100, //库存
  details: "草莓", //详情
  price: 10,//价格
  piAddress: "番禺", //pi地址
  piBalance: 100, //余额
  sku: [
    {
      inventory: 10,
      commoditySpec: [
        "白色, S码 "
      ],
      price: 10,
      image: 'c57a119e39b'
    },
    
  ]
})
  

//提交
const ShopCommodityDto = ref(
  {
  commodityId:null,
  imageList: ['b5e18b357cb'], //图片轮播图集合
  detailImages: ['b5e18b357cb'], //详情图片
  details:"草莓",       //详情介绍
  commodityName: "草莓", //商品名称
  piAddress: "番禺",   //pi地址
  originAddress: "番禺去", //地址
  originPhone: "1232436546767", //电话
  originName: "jj", //名字
  countryCode: ["Accessories & Supplies"], //国家
  acceptAddressList: ["广东省"], //支持发货的地区集合
  categoryId: 84,   //分类id
  // content:"", //子分类内容
  sku: [
    {
      inventory: 100,
      commoditySpec: [
        "白色, S码"
      ],
      "price": 1,
      "image": null
    }
  ],

  freeShippingNum: 1 , // 免费
  priceOrder: 0, //排序
  start: null,  //几页
  size: null, //
  degreeLoss: 0, //抹
  shopId: "c57a119e39b", //网店id
  inventory: 100,
  price: 10, //价格 
  piBalance: 1000, //pi余额
  
}
)

let ImagsList = ref([]);
let swiperImg = ref([]); //绑定轮播图地址
let TopImags = ref([]);
let detailImg = ref([]); //绑定商品详情图片
// 定义地址列表
const addersList = ref([]);

// 商品信息表单数据
let value2 = ref("");
let value3 = ref("");
let value4 = ref("");
let value5 = ref(""); // 颜色
let value7 = ref(0); // 库存
let value8 = ref(0); // 免运费的起始订购数量
let piBalance = ref(null); // pi价格
let piAddress = ref(null); // piAddress
const introduce = ref("");

//  定义控制渲染店铺或商品状态
let state = false; //判断状态是增加或者是修改
const ItpStore = ref(false);
const useUse = useUseStore(); //实例化数据
const addState = ref(false); // 定义状态是否是修改
const showCenter = ref(false); // 修改地址弹窗
const indexAie = ref(0); // 存储下标
const selectBrand = ref(false); //品牌弹出框
const brandList = ref([]); //品牌列表
const indexBrand = ref(-1); // 存储品牌下标
const topCatePupo = ref(false); //一级分类弹窗
const topCateLists = ref([]); //一级分类列表
const secondCatePupo = ref(false); //二级分类弹窗
const secondCateLists = ref([]); //二级分类列表
let value1 = ref("");
let value9 = ref("");
let isPiftware = ref(false); // 判断是否发布到内部渠道

let userId = useStore.userId; // 用户Id

// 定义获取地址方法
const selectAllAddress = async () => {
  const res = await selectAllAddressAPI(useUse.userId);
  addersList.value = res.data.data;
};

// 定义添加方法
const insectBuyerData = async (data) => {
  const res = await insectBuyerDataAPI(data);
};

// 定义修改地址发方法
const updateBuyerDataById = async (data) => {
  const res = await updateBuyerDataByIdAPI(data);
};

// 定义发布方法
const issueItemCoy = async () => {
  dto.value.shopId = useStore.itemId
  console.log(dto.value,"1111")
  console.log( commoditySpecList.value,"2222")

  commoditySpecList.value.forEach(spec => {
  dto.value.sku.push({
    inventory: 10,
    commoditySpec: [`${spec[0]}, ${spec[1]}`], // 转换为字符串格式
    price: 10,
    image: 'c57a119e39b'
  });
});

  console.log(dto.value,"提交")
   const  res = await issueItemCommodity(dto.value);
  // let data = {
  //   acceptAddressList: value1.value.split("，"),
  //   categoryId: secondCateList.value.categoryId,
  //   originAddress: addressFrom.value.address,
  //   originName: addressFrom.value.userName,
  //   originPhone: addressFrom.value.phone,
  //   countryCode: selectCode.value,
  //   itemCommodityName: value2.value,
  //   freeShippingNum: value8.value,
  //   detailImags: TopImags.value,
  //   imagsList: ImagsList.value,
  //   piBalance: piBalance.value,
  //   piAddress: piAddress.value,
  //   itemId: useStore.itemId,
  //   inventory: value7.value,
  //   details: value9.value,
  //   price: value4.value,
  // };
  // console.log(data,"提交数据");
  // if (data.price < 3.14) {
  //   ToastFun("", { msg: "min:3.14eCNY" });
  //   value4.value = null;
  //   return;
  // }
  // if (!data.categoryId) {
  //   ToastFun("", { msg: "Please select category" });
  //   return;
  // }
  // if (!data.acceptAddressList) {
  //   ToastFun("", { msg: "Please select address" });
  //   return;
  // }
  // ToastFun("Loading", { duration: 1000 });


  // const res = await issueItemCommodity(dto.value);

  if (res.data.code == 200) {
    useUseStore().Upload -= 1; // 额度减1
    ToastFun("", {});

    router.push({
      path: "/MeView",
    });
  } else {
    ToastFun("", {});
  }
};

//定义商品一级分类接口
const topCateListFun = async () => {
  const res = await topCateListAPI(0);
  topCateLists.value = res.data.data;
  console.log(res.data.data,"分类");
};

//定义初始化一级分类
const topCateList = ref({
  categoryId: "",
  content: "",
});

//定义初始化二级分类
const secondCateList = ref({
  categoryId: "",
  content: "",
});

//定义商品二级分类接口
const secondCateListFun = async (categoryPid) => {
  const res = await secondCateListAPI(categoryPid);
  secondCateLists.value = res.data.data;
  console.log(res.data.data,"222222");
};

//清空按钮
const goReturn = () => {
  (value1.value = null),
    (brand.value.bid = null),
    (value4.value = null),
    (value2.value = null),
    (addressFrom.value.phone = "832-583-7153"),
    (addressFrom.value.userName = "Jia Ke Yin"),
    (addressFrom.value.address = ""),
    (value3.value = null),
    (TopImags.value = null),
    (ImagsList.value = null),
    (useStore.itemId = null),
    (brand.value.title = "其他"),
    (value5.value = null),
    (value7.value = 0),
    (value9.value = null),
    (value8.value = 0);
  piBalance.value = null;
};

const go = async () =>{
  console.log("测试",dto.value)
 const res = await issueItemCommodity(dto.value);
 console.log(res,"测试")
}

//发布按钮
const goConfirm = () => {
 
  issueItemCoy();
};

// 地址添加信息
// 零时存储地址方法
const addFrom = ref({
  userName: "",
  address: "",
  phone: "",
});

// 定义初始化地址信息
const addressFrom = ref({
  userName: "",
  address: "",
  phone: "",
});

// 添加地址和修改功能
const onSubmit = (values) => {
  if (state) {
    let data = {
      address: addFrom.value.address,
      buyerDataId: addFrom.value.buyerDataId,
      phone: addFrom.value.phone,
      userId: useUse.userId,
      userName: addFrom.value.userName,
    };
    updateBuyerDataById(data);
    selectAllAddress();
  } else {
    let data = {
      address: addFrom.value.address,
      phone: addFrom.value.phone,
      userId: useUse.userId,
      userName: addFrom.value.userName,
    };
    insectBuyerData(data);
    selectAllAddress();
  }

  // 清空零时存储
  addFrom.value = {
    userName: "",
    address: "",
    phone: "",
  };
  // 关闭弹窗
  showCenter.value = false;
};


// 修改地址方法
const resAdders = (index) => {
  addState.value = true;
  showCenter.value = true;
  addFrom.value = addersList.value[index];
  state = true;
};

//定义修改（初始）地址方法
const handoffAdders = (index) => {
  ItpStore.value = false;
  indexAie.value = index;

  console.log(addersList.value[index],"地址")
  dto.value.originAddress = addersList.value[index].address
  dto.value.originPhone = addersList.value[index].phone
  dto.value.originName = addersList.value[index].userName

};

//定义修改一级分类方法
const topCateChange = (index) => {
  indexAie.value = index;
  topCateList.value = topCateLists.value[index];
  dto.value.categoryId = topCateList.value.categoryId
  secondCateListFun(topCateList.value.categoryId);

  getListSuk(topCateList.value.categoryId)
};

const getListSuk = async (categoryPid) =>{
 const res =  await setSkulist(categoryPid)
 console.log(res, "规则")
 specTypeList.value = 
 Object.entries(res.data.data).map(([name, data]) => ({
    name: name,
    data: data,
    isshow: true,
    isSelect: false,
  }))
 console.log(specTypeList.value,"11111")
}

//定义修改二级分类方法
const secondCateChange = (index) => {
  topCatePupo.value = false;
  secondCatePupo.value = false;
  indexAie.value = index;
  secondCateList.value = secondCateLists.value[index];
  console.log(secondCateList.value,"最后的")
  
};

//定义修改（初始）品牌方法
const brandChangs = (id, index) => {
  indexBrand.value = index;

  selectBrand.value = false;

  if (id == null) {
    brand.value.title = "其他";
  } else {
    brandList.value.forEach((item) => {
      if (item.bid == id) {
        brand.value.title = item.title;
        brand.value.bid = item.bid;
      }
    });
  }
};


const itemTopImagsFun = async (file) => {
  let formData = new FormData();
  formData.append("multipartFile", file.file);

  ToastFun("Loading", { duration: 6000 }); //如果图片值为空，就转换为缓存
  // 上传商品详情接口
  let { data } = await itemDetailImagsUp(formData);

  if (data.code == 500) {
    ToastFun("", { msg: t("me.PersonalPosting.shop.imgTips4") });
  }

  dto.value.detailImages.push(data.data);
  console.log(dto.value,"详情图片")
};



// 商品图片的轮播上传
const itemImagsListUpFun = async (file) => {


  /// 转为formData对象，再传到后端
  let formData = new FormData();
  formData.append("multipartFile", file.file);
  ToastFun("Loading", { duration: 6000 }); //如果图片值为空，就转换为缓存


  // 上传头像接口.
  try {
    console.log(formData,"文件对象")
    let { data } = await itemImagsListUp(formData);
    console.log(data, "data");

    if (data.code === 500) {
      ToastFun("", { msg: t("me.PersonalPosting.shop.imgTips4")});
      return;
    }

    // 成功上传后，将图片数据添加到列表中
    dto.value.imageList.push(data.data);
    console.log(ShopCommodityDto.value, "数据");
    console.log(swiperImg.value, "绑定的");
  } catch (error) {
    // 处理上传过程中的错误
    console.error("Error uploading image:", error);
    ToastFun("", { msg: t("me.PersonalPosting.shop.imgTips4")});
  }
 
};

// 获取用户itemId
const getItemIdByUserId = async () => {
  const res = await getItemIdByUserIdAPI(userId);
  console.log("itemID", res.data.data);
  useUseStore().itemId = res.data.data;
};

// 图片超过大小轻提示
const onOversize = () => {
  ToastFun("show", {
    msg: t("upTip"),
  });
};

const isRate = ref(null);

//判断是否开启汇率
const isRater = async () => {
  const res = await enableRateAPI();
  isRate.value = res.data;
  console.log(res.data);
};
//pi汇率
const piRate = ref("");
//获取pi汇率
const getRate = async () => {
  const res = await selectAllTradinRate();
  const rateArray = ref([]);
  rateArray.value = res.data.data;
  console.log(rateArray.value);
  //循环
  for (var i = 0; i < rateArray.value.length; i++) {
    const rate = ref("");
    rate.value = rateArray.value[i];
    //console.log(rate.value);
    if (rate.value.format == "GCV") {
      piRate.value = rate.value.conversionRate;
    }
  }
};
// 兑换汇率
const exchangeRate = (value) => {
  if (value.value == "") {
    piBalance.value = null;
    return;
  }
  if (value4.value < 3.14) {
    piBalance.value = null;
    ToastFun("", { msg: "min:3.14eCNY" });
    return;
  }
  piBalance.value = value * piRate.value;
};

//国家隐藏
const showCountry = ref(false);
const selectAllCountryCode = ref(); //所有国家代码
const selectCountryCodeShow = ref(""); //选择国家代码字符串格式
const selectedCountryCodes = ref([]); //选择国家代码数组格式
const isCheckCountryCodeAll = ref(false); //是否全选国家代码

//选择国家改变时
const passCountryCode = (value) => {
  const checkedCount = value.length;
  isCheckCountryCodeAll.value =
    checkedCount === selectAllCountryCode.value.length;

  dto.value.countryCode = selectedCountryCodes.value.join(", ");
  // console.log(selectCode.value);
  // console.log(value);
};

//点击是否全选国家
const checkAllChangeCountryCode = (val) => {
  selectedCountryCodes.value = val ? selectAllCountryCode.value : [];
};

//配送地区弹窗显示隐藏
const showRegion = ref(false);
const searchRegion = ref("");

//二级地区列表
const secondRegionList = ref([
  { id: 1, name: "广东省", isshow: true },
  { id: 2, name: "江苏省", isshow: true },
  { id: 2, name: "湖北省", isshow: true },
  { id: 3, name: "河南省", isshow: true },
  { id: 4, name: "四川省", isshow: true },
  { id: 7, name: "安徽省", isshow: true },
]);

const selectSecondRegionList = ref([]); // 选中的二级地区name数组格式
const selectSecondRegionShow = ref(""); // 选中的二级地区字符窜格式
//选择地区改变时
const selectSecondRegionChange = () => {
  console.log(selectSecondRegionList.value);
  dto.value.acceptAddressList = selectSecondRegionList.value.join(",");
};
//搜索地区时
const onSearchRegion = () => {
  secondRegionList.value.forEach((item) => {
    if (item.name.includes(searchRegion.value)) {
      item.isshow = true;
      console.log(1);
    } else {
      item.isshow = false;
      console.log(3);
    }
  });
  console.log(123, searchRegion.value);
};

//添加规格类型弹窗显示隐藏
const showSpecType = ref(false);
const searchSpecType = ref("");

//规格类型列表
const specTypeList = ref(null);


const selectSpecTypeList = ref([]); // 选中的规格类型
//选择规格类型时
const selectSpecType = (index) => {
  console.log(index,"leix")
  specTypeList.value[index].isSelect = true;

  specTypeList.value[index].selected = [];
  specTypeList.value[index].originIndex = index;
  console.log(specTypeList.value,"显示规格类型选项")
  selectSpecTypeList.value.push(specTypeList.value[index]);


  console.log( selectSpecTypeList.value,"项")
  selectSpecChange();
};
//取消选择规格类型时
const deleteSpecType = (index) => {
  let index2 = selectSpecTypeList.value[index].originIndex;
  specTypeList.value[index2].isSelect = false;
  selectSpecTypeList.value.splice(index, 1);
  selectSpecChange();
};

//搜索规格类型时
const onSearchSpecType = () => {
  specTypeList.value.forEach((item) => {
    if (item.name.includes(searchSpecType.value)) {
      item.isshow = true;
      console.log(1);
    } else {
      item.isshow = false;
      console.log(3);
    }
  });
  // console.log(123, searchRegion.value);
};
const generateCombinations = (specs, index = 0, current = []) => {
  if (index === specs.length) {
    // 当处理完所有规格时，将当前组合（字符串数组）添加到结果中
    return [current.slice()]; // 使用slice()来创建一个新数组，避免直接修改current
  }
  const combinations = [];
  const { data, name, selected } = specs[index]; // 注意：这里我们其实不需要name，但保留以匹配原始结构
  for (const item of selected) {
    // 将当前规格的值添加到当前组合中
    const newCombination = [...current, item.toString()]; // 确保将值转换为字符串
    // 递归处理下一个规格
    const subCombinations = generateCombinations(
      specs,
      index + 1,
      newCombination
    );
    // 将所有子组合添加到结果中
    combinations.push(...subCombinations);
  }
  return combinations;
};

const simplifiedItems = ref([

]);
const selectSpecChange = () => {
  console.log(simplifiedItems.value,"前")
  simplifiedItems.value = generateCombinations(selectSpecTypeList.value);

  commoditySpecList.value = simplifiedItems.value.map(item => {
    // 将新元素添加到当前子数组
    return [...item];
});

  console.log(dto.value,"选择后")
};
// const checked = ref();
//过滤PAIFTWARE这个分类
const countryData = ref(null);
const countryListFilter = () => {
  if (useUseStore().userInfo.supplier === 0) {
    countryData.value = countryList.filter(
      (item) => item.countryName !== "piftware"
    );
  } else {
    countryData.value = countryList;
  }
  selectAllCountryCode.value = countryData.value.map(
    (item) => item.countryCode
  );
};
onMounted(() => {
  selectAllAddress();
  getItemIdByUserId();
  topCateListFun();
  isRater();
  getRate();
  countryListFilter();
  console.log(useStore.userInfo, "-----------");
});
</script>

<template>
  <!-- 顶部返回按钮 -->
  <div>
    <TopButton :title="$t('me.PersonalPosting.item.title')" />

    <div class="Publish_item">
      <!-- 请上传商品图片 -->
      <div class="text_main">
        <label style="color: red; font-size: 23rem; margin-top: 10rem">*</label>
        <textarea
          cols="22"
          rows="6"
          disabled
          :placeholder="$t('me.PersonalPosting.item.tips1')"
          style="background-color: #fff"
        />

        <div class="perSonal_content">
          <div class="file">
            <van-uploader
              preview-size="50rem"
              :after-read="itemImagsListUpFun"
              :max-count="5"
              :max-size="5000 * 1024"
              v-model="swiperImg"
              @oversize="onOversize"
            />
          </div>
        </div>
      </div>
      <!-- 请上传商品详情图片 -->
      <div class="text_main" style="margin-top: 10rem">
        <label style="color: red; font-size: 23rem; margin-top: 10rem">*</label>
        <textarea
          cols="22"
          rows="8"
          :placeholder="$t('me.PersonalPosting.item.tips2')"
          v-model="ShopCommodityDto.details"
        />

        <div class="perSonal_content">
          <div class="file">
            <van-uploader
              preview-size="50rem"
              :after-read="itemTopImagsFun"
              :max-count="5"
              :max-size="5000 * 1024"
              @oversize="onOversize"
              v-model="detailImg"
            />
          </div>
        </div>
      </div>
      <div class="addressCoe">
        <van-cell-group style="width: 370rem" inset>
          <!-- eCNY -->
          <!-- <van-cell-group style="display: flex">
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              label="eCNY"
              type="number"
              v-model.number="value4"
              :placeholder="$t('me.PersonalPosting.item.tips3')"
              v-if="isRate"
              @keyup="exchangeRate(value4)"
            />
            <van-field
              label="eCNY"
              type="number"
              v-model.number="value4"
              :placeholder="$t('me.PersonalPosting.item.tips3')"
              v-else
            />
          </van-cell-group> -->
          <!-- 
          <van-cell-group
            style="width: 370rem; margin-top: 0; display: flex"
            inset
            v-if="useStore.userInfo.piShoper"
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              label="Pi"
              type="number"
              v-model.number="piBalance"
              :placeholder="'Pi'"
              :readonly="true"
              v-if="isRate"
            />
            <van-field
              label="Pi"
              type="number"
              v-model.number="piBalance"
              :placeholder="'Pi'"
              v-else
            />
          </van-cell-group> -->

          <!-- pi地址 -->
          <van-cell-group
            style="width: 370rem; display: flex"
            insetn
            v-if="useStore.userInfo.piShoper"
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              label="piAddress"
              v-model="dto.piAddress"
              :placeholder="'piAddress'"
            />
          </van-cell-group>
         
          <!-- 发货地址 -->
          <van-cell-group
            style="width: 370rem; display: flex"
            @click="ItpStore = true"
            insetn
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              :label="$t('me.PersonalPosting.origin')"
              class="text_end"
            />
            <span class="text-right">
              {{ ShopCommodityDto.originAddress }}<br />
              {{ ShopCommodityDto.originName }}
              {{ ShopCommodityDto.originPhone }}
            </span>
          </van-cell-group>

          <!-- 销往哪个国家 -->
          <van-cell-group
            style="width: 370rem; display: flex"
            insetn
            @click="showCountry = true"
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              :label="$t('ReceivingCountry')"
              class="text-end"
              v-model="ShopCommodityDto.countryCode"
            />
            <span class="text-right"
              ><img
                style="width: 15rem; height: 15rem"
                src="/images/down.png" /><br
            /></span>
          </van-cell-group>
          <!-- 配送地区 -->
          <van-cell-group
            style="width: 370rem; display: flex"
            insetn
            @click="showRegion = true"
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              :label="$t('NoFreeShippingAreas')"
              class="text-end"
              v-model="ShopCommodityDto.acceptAddressList"
            />
            <span class="text-right"
              ><img
                style="width: 15rem; height: 15rem"
                src="/images/down.png" /><br
            /></span>
          </van-cell-group>
          <!-- 库存 -->
          <van-cell-group
            style="width: 370rem; display: flex"
            insetn
            v-if="useStore.userInfo.piShoper"
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              label="inventory"
              v-model="dto.inventory"
              :placeholder="'inventory'"
            />
          </van-cell-group>

          <!-- 分类 -->
          <van-cell-group
            @click="topCatePupo = true"
            style="width: 370rem; display: flex"
            insetn
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              :label="$t('me.PersonalPosting.item.selectCategory')"
              class="text-end"
            />
            <span class="text-right"
              >{{ secondCateList.content}}<img
                style="width: 15rem; height: 15rem"
                src="/images/down.png" /><br
            /></span>
          </van-cell-group>
        </van-cell-group>

        <!-- 规格 -->
        <van-cell-group
          @click="showSpecType = true"
          style="margin-top: 10rem; display: flex"
          insetn
        >
          <label style="color: red; font-size: 23rem; margin-top: 15rem"
            >*</label
          >
          <label style="margin-top: 10rem; margin-left: 15rem; font-size: 16rem"
            >规格</label
          >
          <span style="top: 10rem; font-size: 23rem"
            ><van-icon name="add" color="#642e8eff"
          /></span>
        </van-cell-group>

        <!-- <van-cell-group v-for="(item, index) in selectSpecTypeList" :key="index">
                <span>{{ item.name }}</span>
          </van-cell-group> -->
        <!-- 规格类型 -->
        <div class="card">
          <div
            class="card-body"
            v-for="(item, index) in selectSpecTypeList"
            :key="index"
          >
            <div class="card-body_title">
              <label> {{ item.name }}</label
              ><van-icon
                name="delete-o"
                size="23rem"
                color="#642e8eff"
                @click="deleteSpecType(index)"
              />
            </div>
            <div class="card-body_content">
              <van-checkbox-group
                v-model="item.selected"
                direction="horizontal"
                shape="square"
                checked-color="#642e8eff"
                @change="selectSpecChange"
              >
                <van-checkbox
                  :name="item"
                  v-for="(item, index) in item.data"
                  :key="index"
                  >{{ item }}</van-checkbox
                >
              </van-checkbox-group>
            </div>

            
          </div>
        </div>

        <!-- 库存价格 -->
        <div class="table-content" v-if="selectSpecTypeList.length > 0">
          <table border="1">
            <thead>
              <tr>
                <th v-for="(item, index) in selectSpecTypeList" :key="index">
                  {{ item.name }}
                </th>
                <!-- <th>
                  库存量 <label style="color: red; font-size: 23rem">*</label>
                </th>
                <th>
                  价格(eCNY)
                  <label style="color: red; font-size: 23rem">*</label>
                </th>
                <th v-if="useStore.userInfo.piShoper">
                  价格(pi币)
                  <label style="color: red; font-size: 23rem">*</label>
                </th> -->
              </tr>
            </thead>
            <!-- 表格内容，类似于之前的示例 -->
            <tbody>
              <tr v-for="(item, index) in simplifiedItems" :key="index">
                <td v-for="(item1, index) in item" :key="index">{{ item1 }}</td>
                <!-- <td>
                  <van-field v-model="item.stock" type="digit" size="normal" />
                </td>
                <td>
                  <van-field v-model="item.price" type="number" size="normal" />
                </td>
                <td v-if="useStore.userInfo.piShoper">
                  <van-field
                    v-model="item.piPrice"
                    type="number"
                    size="normal"
                  />
                </td> -->
              </tr>
            </tbody>
          </table>

        
        </div>
        <div class="isPiftware" v-if="useUseStore().userInfo.supplier != 0">
          <div class="que">Publish to internal channels?</div>
          <input type="checkbox" v-model="isPiftware" />
        </div>

        <!--  一级分类弹窗功能 -->
        <van-popup
          v-model:show="topCatePupo"
          closeable
          position="bottom"
          :style="{ height: '75%', backgroundColor: '#F5F5F5FF' }"
        >
          <ul class="addersList">
            <li
              v-for="(item, index) in topCateLists"
              :key="index"
              :class="{ border: index == indexAie }"
              @click="topCateChange(index), (secondCatePupo = true)"
            >
              <p class="ellipsis-2">
                {{ $t(`item.categoryTitle.${item.content}`) }}
              </p>
            </li>
          </ul>
        </van-popup>

        <!--  二级分类弹窗功能 -->
        <van-popup
          v-model:show="secondCatePupo"
          closeable
          position="bottom"
          :style="{ height: '50%', backgroundColor: '#F5F5F5FF' }"
        >
          <ul class="addersList">
            <div class="first_content">{{ topCateList.content }}</div>
            <li
              v-for="(item, index) in secondCateLists"
              :key="index"
              :class="{ border: index == indexAie }"
              @click="secondCateChange(index)"
            >
              <p class="ellipsis-2">
                {{ $t(`onlineShop.${item.content}`) }}
              </p>
            </li>
          </ul>
        </van-popup>

        <!-- 品牌弹窗功能 -->
        <van-popup
          v-model:show="selectBrand"
          closeable
          position="bottom"
          :style="{ height: '75%', backgroundColor: '#F5F5F5FF' }"
        >
          <ul class="addersList">
            <li :class="{ border: indexBrand == -1 }" class="ellipsis-3">
              <p @click="brandChangs(null, -1)">
                {{ $t("me.PersonalPosting.item.other") }}
              </p>
            </li>
            <li
              v-for="(item, index) in brandList"
              :key="index"
              :class="{ border: index == indexBrand }"
              @click="brandChangs(item.bid, index)"
            >
              <p class="ellipsis-2">
                {{ item.title }}
              </p>
            </li>
          </ul>
        </van-popup>

        <!-- 地址弹窗功能 -->
        <van-popup
          v-model:show="ItpStore"
          closeable
          position="bottom"
          :style="{ height: '75%', backgroundColor: '#F5F5F5FF' }"
        >
          <ul class="addersList">
            <li
              v-for="(item, index) in addersList"
              :key="index"
              :class="{ border: index == indexAie }"
              @click="handoffAdders(index)"
            >
              <p class="ellipsis-2">
                {{ item.address }}
              </p>
              <div class="footer_en">
                <div class="info">
                  <div class="name">{{ item.userName }}</div>
                  <div class="date">{{ item.phone }}</div>
                </div>
                <div class="text_right" @click="resAdders(index)">Revise</div>
              </div>
            </li>
          </ul>

          <!-- 修改地址弹窗 -->
          <van-popup v-model:show="showCenter" round>
            <van-form @submit="onSubmit">
              <van-cell-group inset>
                <van-field
                  v-model="addFrom.userName"
                  name="name"
                  :label="$t('me.PersonalPosting.item.userName')"
                  :placeholder="$t('me.PersonalPosting.item.userName')"
                  :rules="[
                    { required: true, message: $t('me.PersonalPosting.rules') },
                  ]"
                />
                <van-field
                  v-model="addFrom.address"
                  type="text"
                  name="address"
                  :label="$t('me.PersonalPosting.item.address')"
                  :placeholder="$t('me.PersonalPosting.item.address')"
                  :rules="[
                    { required: true, message: $t('me.PersonalPosting.rules') },
                  ]"
                />
                <!-- <van-field v-model="addFrom.phone" name="phone" type="phone" label="手机号" placeholder="手机号" :rules="[
                { required: true, message: $t('me.PersonalPosting.rules') },
              ]" /> -->

                <van-field
                  v-model="addFrom.phone"
                  :name="$t('me.PersonalPosting.item.phone')"
                  type="phone"
                  :label="$t('me.PersonalPosting.item.phone')"
                  :placeholder="$t('me.PersonalPosting.item.phone')"
                />
              </van-cell-group>
              <div style="margin: 16rem">
                <van-button round block native-type="submit">
                  {{ $t("me.PersonalPosting.item.confirm") }}
                </van-button>
              </div>
            </van-form>
          </van-popup>

          <!-- 添加按钮 -->
          <footer @click="showCenter = true">
            <div class="icon">+</div>
            Add a new address
          </footer>
        </van-popup>

        <!-- 国家弹窗 -->
        <van-popup
          v-model:show="showCountry"
          round
          class="pop"
          position="bottom"
        >
          <ul class="countrySelect">
            <li>
              <van-checkbox
                v-model="isCheckCountryCodeAll"
                @change="checkAllChangeCountryCode"
              >
                全选
              </van-checkbox>
            </li>
            <van-checkbox-group
              v-model="selectedCountryCodes"
              @change="passCountryCode"
            >
              <li v-for="item in countryData" :key="item.countryCode">
                <van-checkbox :name="item.countryCode" />
                <div class="country">{{ item.countryEName }}</div>
                <img :src="`/images/countryImg/${item.img}`" />
              </li>
            </van-checkbox-group>
          </ul>
        </van-popup>
        <!-- 配送地区弹窗 -->
        <van-popup
          v-model:show="showRegion"
          round
          class="pop"
          position="bottom"
        >
          <van-search
            v-model="searchRegion"
            shape="round"
            @search="onSearchRegion"
            placeholder="请输入搜索关键词"
          />
          <ul class="regionSelect">
            <van-checkbox-group
              v-model="selectSecondRegionList"
              @change="selectSecondRegionChange"
            >
              <li
                v-for="item in secondRegionList"
                :key="item.id"
                v-show="item.isshow"
              >
                <van-checkbox :name="item.name" />
                <div class="region">{{ item.name }}</div>
                <div></div>
              </li>
            </van-checkbox-group>
          </ul>
        </van-popup>
        <!-- 添加规格弹窗 -->
        <van-popup
          v-model:show="showSpecType"
          round
          class="pop"
          position="bottom"
        >
          <van-search
            v-model="searchSpecType"
            shape="round"
            @search="onSearchSpecType"
            placeholder="请输入搜索关键词"
          />
          <ul class="regionSelect">
            <li
              v-for="(item, index) in specTypeList"
              :key="item.id"
              v-show="item.isshow"
            >
              <van-icon
                v-if="!item.isSelect"
                name="add"
                size="23rem"
                color="#642e8eff"
                @click="selectSpecType(index)"
              />
              <van-icon v-else name="checked" size="23rem" color="#642e8eff" />
              <div class="region">{{ item.name }}</div>
              <div></div>
            </li>
          </ul>
        </van-popup>
        <!-- <van-popup
          v-model:show="showCountry"
          round
          class="pop"
          position="bottom"
        >
          <ul class="countrySelect">
            <li
              v-for="item in countryData"
              @click="passCountryCode(item.countryCode)"
            >
              <div class="country">
                {{ item.countryEName }}
              </div>
              <img :src="`/images/countryImg/${item.img}`" />
            </li>
          </ul>
        </van-popup> -->
      </div>
        <!-- 库存 -->
        <van-cell-group
            style="width: 370rem; display: flex"
            insetn
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              label="inventory"
              v-model="dto.sku[0].inventory"
              :placeholder="'inventory'"
            />
          </van-cell-group>
          <!-- piPrice -->
          <van-cell-group
            style="width: 370rem; display: flex"
            insetn
          >
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <van-field
              label="price"
              v-model="dto.sku[0].price"
              :placeholder="'price'"
            />
          </van-cell-group>

      <van-form  @submit="onSubmit">
        <van-cell-group style="width: 370rem" inset>
          <!-- 通过 pattern 进行正则校验 这个品牌类别？？？？-->

          <van-field
            :label="$t('me.PersonalPosting.subTitle')"
            name="pattern"
            disabled
          />
          <!-- 商品详情 -->
          <!-- 通过 validator 进行函数校验 -->
          <van-field
            v-model="dto.details"
            :label="$t('me.PersonalPosting.details')"
            name="validator" 
            :placeholder="$t('me.PersonalPosting.detailsTips')"
           
          />
          <!-- 配送地区 -->
          <!-- <van-cell-group style="display: flex">
          
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
          
            <van-field
              v-model="value1"
              :label="$t('NoFreeShippingAreas')"
              name="validator"
              :placeholder="$t('NoFreeShippingAreas')"
              :rules="[
                { required: true, message: $t('me.PersonalPosting.rules') },
              ]"
            />
          </van-cell-group> -->
          <!-- 通过 validator 进行函数校验 -->

          <!-- <van-field
          v-model="value6"
          :label="$t('me.PersonalPosting.size')"
          name="validator"
          :placeholder="$t('me.PersonalPosting.sizeTips')"
          :rules="[{ required: true, message: $t('me.PersonalPosting.rules') }]"
        /> -->
          <!-- 通过 validator 进行函数校验 -->
          <!-- 库存 -->
          <!-- <van-cell-group style="display: flex">
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
       
            <van-field
              v-model.number="value7"
              :label="$t('me.PersonalPosting.inventory')"
              name="validator"
              :placeholder="$t('me.PersonalPosting.inventoryTips')"
              :rules="[
                { required: true, message: $t('me.PersonalPosting.rules') },
              ]"
            />
         
          </van-cell-group> -->
          <!-- 免费起送数量 -->
          <van-field
            v-model="dto.freeShippingNum"
            :label="$t('me.PersonalPosting.free')"
            name="validator"
            :placeholder="$t('me.PersonalPosting.freeTips')"
            :rules="[
              { required: true, message: $t('me.PersonalPosting.rules') },
            ]"
          />

          <!-- 通过 validator 进行异步函数校验 -->
          <van-cell-group style="display: flex">
            <label style="color: red; font-size: 23rem; margin-top: 15rem"
              >*</label
            >
            <!-- 产品名称 -->
            <van-field
              v-model="dto.commodityName"
              :label="$t('me.PersonalPosting.itemName')"
              name="asyncValidator"
              :placeholder="$t('me.PersonalPosting.itemNameTips')"
              :rules="[
                { required: true, message: $t('me.PersonalPosting.rules') },
              ]"
            />
          </van-cell-group>
        </van-cell-group>

        <div class="footer_button">
          <button @click="goReturn()">
            {{ $t("me.PersonalPosting.reset") }}
          </button>

          <button round block native-type="submit" @click="goConfirm()">
            {{ $t("me.PersonalPosting.confirm") }}
          </button>
        </div>

        <!-- <footer> </footer> -->
      </van-form>

    
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Publish_item {
  overflow: hidden;
  font-size: 14rem;
  background-color: #f5f5f5;
  padding: 70rem 10rem 0 10rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;

  .text_main {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 10rem;
    display: flex;

    textarea {
      border-radius: 10rem;
      resize: none;
      padding: 10rem;
      border: 0;
      width: 100%;
      box-sizing: border-box;
      text-indent: 1em;
    }

    .perSonal_content {
      position: absolute;
      bottom: 10rem;
      left: 10rem;
      border-radius: 6rem;
      padding: 10rem 2rem 2rem 10rem;
      text-align: center;
      background-color: #e0e0e0;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .perSonal_login {
        font-size: 20rem;
      }
    }
  }

  .addressCoe {
    //国家弹窗
    .pop {
      .countrySelect {
        width: 390rem;
        height: 500rem;

        li {
          padding: 10rem;
          display: flex;
          bottom: 1px solid;
          justify-content: space-between;

          .country {
            font-size: 16rem;
            font-weight: bold;
          }

          img {
            width: 30rem;
            height: 30rem;
          }
        }
      }
      .regionSelect {
        width: 390rem;
        height: 500rem;

        li {
          padding: 10rem;
          display: flex;
          bottom: 1px solid;
          justify-content: space-between;

          .region {
            font-size: 16rem;
            font-weight: bold;
          }
        }
      }
    }

    :deep(.van-cell-group--inset) {
      margin: 0;
      position: relative;
      margin-top: 10rem;
    }

    :deep(.van-button) {
      background-color: #642e8eff;
      color: #fff;
      border-radius: 10rem;
    }
    .card {
      margin-top: 10rem;
      .card-body {
        padding: 10rem 15rem;
        font-size: 15rem;
        line-height: 12rem;
        .card-body_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .card-body_content {
          margin-top: 10rem;
          // display: flex;
          // flex-wrap: wrap;
        }
      }
    }
    .table-content {
      margin-top: 10rem;
      display: flex;
      overflow: auto;
      white-space: nowrap;
      background-color: #fff;
      border-radius: 10rem;
      justify-content: center;

      /* 表格整体样式 */
      table {
        border-collapse: collapse; /* 边框合并为一个单一的边框 */
        margin: 20rem 20rem; /* 上下外边距 */
      }

      /* 表格标题（thead）样式 */
      thead {
        background-color: #f2f2f2; /* 背景色 */
        color: #333; /* 字体颜色 */
      }

      /* 表格头部单元格（th）样式 */
      th {
        padding: 5rem; /* 内边距 */
        text-align: center; /* 文本左对齐 */
        // border-bottom: 2px solid #ddd; /* 底部边框 */
      }
      /* 表格行（tr）样式（如果需要） */
      tr:nth-child(even) {
        background-color: #f9f9f9; /* 斑马线效果，偶数行背景色 */
      }

      /* 表格单元格（td）样式 */
      td {
        padding: 5rem; /* 内边距 */
        text-align: center; /* 文本左对齐 */
        // border-bottom: 1px solid #ddd; /* 底部边框 */
      }

      /* 鼠标悬停时的样式（可选） */
      tr:hover {
        background-color: #f1f1f1; /* 鼠标悬停时的背景色 */
      }

      /* 表格宽度固定，内容超出时显示滚动条（可选） */

      /* 单元格内文本过长时显示省略号（可选） */
      // td.ellipsis {
      //   white-space: nowrap; /* 文本不换行 */
      //   overflow: hidden; /* 隐藏超出部分 */
      //   text-overflow: ellipsis; /* 显示省略号 */
      // }
    }
    .isPiftware {
      margin-top: 10rem;
      padding: 10rem 16rem;
      background: #fff;
      border-radius: 5rem;

      display: flex;
      justify-content: space-between;
    }

    span {
      font-size: 16rem;
      position: absolute;
      right: 10rem;
      top: 20rem;
      font-weight: bold;
    }

    .text_end {
      padding-bottom: 50rem;
    }

    .text-end {
      padding-bottom: 10rem;
    }

    .text-right {
      color: #ccc;
      font-weight: 500;
      text-align: right;
    }

    .van-popup--bottom {
      position: relative;
      overflow: auto;

      .addersList {
        :deep(.van-field__label) {
          width: auto;
        }

        padding-top: 40rem;

        .first_content {
          font-size: 20rem;
          margin-left: 20rem;
          margin-bottom: 20rem;
          font-weight: 600;
        }

        li {
          border: 1rem solid transparent;
          box-sizing: border-box;
          width: 90%;
          margin: 10rem auto;
          background-color: #ffffff;
          border-radius: 10rem;
          padding: 10rem 15rem;

          p {
            width: 70%;
            font-size: 16rem;
            line-height: 30rem;
          }

          .footer_en {
            display: flex;
            justify-content: space-between;

            .info {
              color: #ccc;
              display: flex;
              font-size: 16rem;
              line-height: 30rem;

              .name {
                margin-right: 10rem;
              }
            }

            .text_right {
              width: 58rem;
              height: 36rem;
              text-align: center;
              line-height: 36rem;
              white-space: nowrap;
              color: #642e8eff;
              border: 1rem solid;
              border-radius: 5rem;
            }
          }

          &.border {
            border: 1rem solid #642e8eff;
          }
        }

        .ellipsis-3 {
          line-height: 50rem;
          font-size: 16rem;
          font-weight: 500;
          margin-left: 20rem;
          padding-left: 15rem;
          background-color: #fff;
          width: 348rem;
          height: 50rem;
          border-radius: 10rem;
          margin-bottom: 10rem;
          // &:hover{
          //   border: 2rem solid #642e8eff;
          // }
        }
      }

      footer {
        position: relative;
        bottom: 0rem;
        left: 10rem;
        width: 90%;
        height: 50rem;
        display: flex;
        justify-content: center;
        color: #642e8eff;
        border: 2rem solid;
        border-radius: 10rem;
        font-size: 18rem;
        align-items: center;

        .icon {
          margin-right: 10rem;
          width: 25rem;
          height: 25rem;
          text-align: center;
          line-height: 25rem;
          border: 2rem solid;
          color: #642e8eff;
          border-radius: 50%;
          font-size: 20rem;
        }
      }
    }
  }

  .van-form {
    margin-bottom: 90rem;

    :deep(.van-cell__title) {
      min-width: 95rem;
    }

    .van-cell-group--inset {
      margin: 0;
      margin-top: 10rem;
    }
  }

  // footer {
  //   width: 100%;
  //   position: absolute;
  //   bottom: -30rem;
  //   left: 0;
  // }

  .footer_button {
    width: 100%;
    display: flex;
    justify-content: space-around;
    //padding-bottom: 16rem;
    // position: fixed;
    bottom: 0;
    padding-top: 25rem;

    button {
      color: #fff;
      background-color: #642e8eff;
      width: 40%;
      height: 40rem;
      line-height: 40rem;
      border-radius: 20rem;
      text-align: center;
      border: 1rem solid;

      &:hover {
        color: #fff;
        background-color: #642e8eff;
      }
    }
  }
}
</style>
